<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include :: header('修改密码')" />
</head>
<body class="hold-transition gray-bg sidebar-mini">
<div class="wrapper">
	<section class="content">
		<div class="box box-info">
		   <div class="box-header with-border">
				<h3 class="box-title">Dropzone.js</h3>
				<div class="box-tools pull-right">
				</div>
			</div>
		   	<div class="box-body">
		   		<div id="dropzone" class="dropzone">
		   		</div>
		   		<div style="margin-top: 10px;">
					<button type="button" class="btn btn-sm btn-primary" id="submit-dropzone">点击上传</button>
				</div>
	   		</div>
			<div class="box-footer">
			  查看 <a href="https://www.dropzonejs.com">dropzone.js 文档</a> 获取更过插件信息.
			</div>
		</div>
	</section>
</div>

<!-- 上传文件预览 -->
<div id="preview-template" style="display:none;">
    <div class="dz-preview dz-file-preview">
        <div class="dz-image">
            <img data-dz-thumbnail="" height="120px" width="120px"/>
        </div>
        <div class="dz-error-message">
            <span data-dz-errormessage=""></span>
        </div>
        <div class="dz-success-mark">
            <span class="fa-stack fa-lg bigger-150">
                <i class="fa fa-circle fa-stack-2x white"></i>
                <i class="fa fa-check fa-stack-1x fa-inverse green"></i>
            </span>
        </div>
        <div class="dz-error-mark">
            <span class="fa-stack fa-lg bigger-150">
                <i class="fa fa-circle fa-stack-2x white"></i>
                <i class="fa fa-remove fa-stack-1x fa-inverse red"></i>
            </span>
        </div>
    </div>
</div>

<th:block th:include="include :: footer" />
<script type="text/javascript">
	Dropzone.autoDiscover = false;
	var myDropzone = new Dropzone('#dropzone', {
        url: ctx + "sysfile/upload", // 文件提交地址
        method: "post",  // 也可用put
        paramName: "file", // 默认为file
        maxFiles: 1,// 一次性上传的文件数量上限
        maxFilesize: 2, // 文件大小，单位：MB
        uploadMultiple: true, // 是否开启多图上传
        autoProcessQueue: false, // 是否点击选择直接上传
        acceptedFiles: ".jpg,.gif,.png,.jpeg,.txt,.doc,.docx.xls,.xlsx", // 上传的类型
        thumbnailHeight: 120,
        thumbnailWidth: 120,
        addRemoveLinks: true,
        parallelUploads: 1, // 并行上传处理数
        previewTemplate: $('#preview-template').html(),
        dictDefaultMessage: "<button class='btn btn-default btn-flat' type='button'>点击上传图片</button>",
        dictMaxFilesExceeded: "您最多只能上传1个文件！",
        dictResponseError: '文件上传失败!',
        dictInvalidFileType: "文件类型只能是*.jpg,*.gif,*.png,*.jpeg,.txt,.doc,.docx,.xls,.xlsx。",
        dictFallbackMessage: "浏览器不受支持",
        dictFileTooBig: "文件过大上传文件最大支持.",
        dictRemoveFile: "移除文件",
        dictCancelUpload: "取消上传",
        init: function () {
            this.on("addedfile", function (file) {
                console.log("添加文件");
            });
            this.on("success", function (file, data) {
            	console.log("上传成功");
            });
            this.on("error", function (file, data) {
            	console.log("上传失败");
            });
            this.on("removedfile", function (file) {
            	console.log("移除文件");
            });
            let myDropzone = this;
            // 点击上传按钮
            var submitButton = document.querySelector("#submit-dropzone")
	        submitButton.addEventListener("click", function(e) {
                e.preventDefault();
                e.stopPropagation();
	          	myDropzone.processQueue();
	        });
            // 回显
            let mockFile = { name: "Filename", size: 100 };
            let callback = null; // Optional callback when it's done
            let crossOrigin = null; // Added to the `img` tag for crossOrigin handling
            let resizeThumbnail = false; // Tells Dropzone whether it should resize the image first
            myDropzone.displayExistingFile(mockFile, "https://api.yike-cloud.com/static/mealimg/1616640217713.png", callback, crossOrigin, resizeThumbnail);

        },
    })
</script>
</body>
</html>